<template>
	<view class="page-container ">
	  <block v-if="items.length !== 0">
	    <view class="item-box" v-for="(item1,index) in items" :key="index">
	      <view class="row-1">
	        <view>第{{['一','二','三','四','五','六','七','八','九','十'][index]}}次给药</view>
	        <view>
	          <image class="edit-icon" @click="editItem(index)"  src="/static/svg/mode-edit.svg"></image>
	          <image class="del-icon" @click="delItem(index)"  src="/static/svg/mode-del.svg"></image>
	        </view>
	      </view>
	      <view class="row-2">
	        <view>强度
	          <text class="center-bottom">{{item1.strength}}档</text>
	        </view>
	        <view>单次给药时间
	          <text class="center-bottom">{{item1.choushui_sec}}秒</text>
	        </view>
	        <view>间隔时间
	          <text class="center-bottom">{{item1.sleep_sec}}秒</text>
	        </view>
	      </view>
	    </view>
	    <view class="f-center">
	      <view class="mask-confirm-btn save-btn f-center" @click="openMask2">保存</view>
	    </view>
	    
	  </block>
	  <block v-else>
	    <view class="no-item">
	      还没有模式哦，请手动添加
	    </view>
	  </block>
	  <view class="add-item" @click="editItem">
	    <image src="/static/svg/mode-add-btn.svg"></image>
	  </view>
	  <view class="mask" v-if="showMask">
	    <edit-mode-item :item="item"  @itemcancel="itemcancel" @itemsave="itemsave"></edit-mode-item>
	  </view>
	  <view class="mask" v-if="showMask2">
	    <edit-mode-name :name="name"  @namesave="namesave" ></edit-mode-name>
	  </view>
	</view>
</template>

<script>
	import {depCopy} from '/utils/util.js'
	import {createMode,getMode,saveMode} from '/utils/jkeyMode.js'
	export default {
		data() {
			return {
				 defaultItem:{
				      choushui_sec: 0.7, strength: 2, sleep_sec: 0.7
				    },
				    items:[],
				    index:'',//编辑的项目的索引
				    item:{},//要编辑的项目
				    showMask:false,
				    showMask2:false,
				    name:''
			};
		},
		onLoad(options) {
			//window.vue3 = this
		    this.type = options.type
		    this.name = options.name
		  },
		  onShow() {
			  // console.log(getMode(this.type,this.name))
		      this.setData({
		        defaultConfig:uni.getStorageSync('defaultConfig'),
		        items:getMode(this.type,this.name).data?.items ?? [],
		        option:getMode(this.type,this.name).data
		      })
		    },
		methods:{
			setData(obj){
				for(let i of Object.keys(obj)){
					this[i] = obj[i]
				}
			},
			openMask2(){
			    //如果是编辑直接保存，不用修改名称
			    if(this.name){
			      let res = saveMode(this.type,{
			        ...this.option,
			        items:this.items
			      })
			      console.log(res)
			      if(!res.success){
			        return uni.showToast({
			          title: res.msg,
			          icon:'none'
			        })
			      }else{
			        return uni.navigateBack({
			          success(){
			            uni.showToast({
			              title: '保存成功',
			              icon:'none'
			            })
			          }
			        })
			      }
			    }
			    this.setData({
			      showMask2:true
			    })
			  },
			  delItem(index){
			    let items = this.items
			    items.splice(index,1)
			    this.setData({
			      items
			    })
			  },
			  editItem(index){
				  if(this.items.length >= 10){
					  return uni.showToast({
			            title: '最多添加10条',
						icon:'error'
			          })
				  }
				  if(typeof index !== 'number'){
					  index = this.items.length
				  }
				console.log(index)
			    let item = this.items[index] ?? this.defaultItem
			    this.setData({
			      item:depCopy(item),
			      index:index,
			      showMask:true
			    })
			  },
			  itemcancel(e){
			    this.setData({
			      showMask:false
			    })
			  },
			  itemsave(item){
				  console.log(item,this.index)
				  this.items[this.index] = item
				  this.showMask = false
			    // this.setData({
			    //   ['items['+this.index+']']:item,
			    //   showMask:false
			    // })
			  },
			  namesave(params){
			    this.setData({
			      name:params.name
			    })
			    let res = createMode(this.type,{
			      items:this.items,
			      type:this.type,
			      name:this.name
			    })
			    if(!res.success){
			      uni.showToast({
			        title: res.msg,
					icon:'error'
			      })
			    }else{
			      this.setData({
			        showMask2:false
			      })
			      
			      uni.navigateBack({
			        success(){
			          uni.showToast({
			            title: '保存成功'
			          })
			        }
			      })
			    }
			  },
		}
	}
</script>

<style lang="less">
/* pages/mode/index.wxss */
.page-container{
  padding: 40rpx 0;
	//height:100%;
  overflow-y: auto;
}
.no-item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items:center;
  margin-top: -100rpx;
  color: #808080FF;
  font-size: 28rpx;
}

.add-item{
  position: fixed;
  bottom: 236rpx;
  right: 72rpx;

  width: 150rpx;
  height: 150rpx;
}
.add-item image{
  width: 100%;
  height: 100%;
}

.item-box{
  margin: 24rpx 40rpx;
  background-color: #FFF3F1FF;
  border-radius: 20rpx;
}


.row-1{
  height: 110rpx;
  padding: 0 36rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 40rpx;
  color: #f5736e;
}
.row-1 >view:last-child{
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-1 >view:last-child image:first-child{
  width: 40rpx;
  height: 40rpx;
}
.row-1 >view:last-child image:last-child{
  margin-left: 46rpx;
  width: 48rpx;
  height: 48rpx;
}
.row-2{
  display: flex;
  padding: 0 40rpx;
  padding-bottom: 80rpx;

  justify-content: space-between;
}
.row-2 >view{
  color: #404040;
  font-size: 24rpx;
  position: relative;
}

.center-bottom{
  font-size: 32rpx;
  color: #000;
  position: absolute;
  bottom: -1.8em;
  left: 50%;
  transform: translate(-50%,0);

  white-space: nowrap;
}

.mask{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #00000066;

  display: flex;
  justify-content: center;
  align-items: center;
  
}

.save-btn{
  margin-top: 100rpx;
  margin-bottom: 50rpx;
  width: 400rpx;
  height: 100rpx;
  font-size: 40rpx;
}

</style>
